<template>
  <view>
    <uni-search-bar @confirm="search" style="margin-bottom: -14upx;" :focus="true" readonly v-model="searchValue" @click="onClickSearch" />
    <uni-popup ref="popup" type="top" class="userPopup">
      <view class="popup-body">
        <uni-forms
          ref="formRef"
          v-model="formData"
          :rules="rules"
          label-position="top"
          label-width="75vw"
          class="form">
          <uni-forms-item name="carNo" label="车牌号">
            <uni-easyinput type="text" v-model="formData.carNo" placeholder="请输入车牌号" />
          </uni-forms-item>
          <uni-forms-item name="workNo" label="作业单号">
            <uni-easyinput type="text" v-model="formData.workNo" placeholder="请输入作业单号" />
          </uni-forms-item>
          <!-- <uni-forms-item name="merchandiseName" label="货品名称">
            <uni-easyinput type="text" v-model="formData.merchandiseName" placeholder="请输入货品名称" />
          </uni-forms-item>
           -->
          <uni-forms-item name="startTime" label="开始时间">
            <uni-datetime-picker
              v-model="formData.startTime"
              placeholder="请选择开始时间"
              type="datetime"
              :hide-second="true"
              @change="changeTime">
            </uni-datetime-picker>
          </uni-forms-item>
          <uni-forms-item name="endTime" label="结束时间">
            <uni-datetime-picker
              v-model="formData.endTime"
              placeholder="请选择结束时间"
              type="datetime"
              :hide-second="true"
              @change="changeTime">
            </uni-datetime-picker>
          </uni-forms-item>

          <div class="ft">
            <button type="info" class="reset" @click="handleReset">重置</button>
            <button type="primary" @click="handleSubmit">搜索</button>
          </div>
        </uni-forms>
      </view>
    </uni-popup>

    <Table ref="table" :fetchData="fetchData" :autoFetch="false">
      <template #default="{ data }">
        <view v-for="(item, index) in data" :key="index">
          <uni-card v-if="item.storageId+item.businessType !== activeId" @click="onCardClick(item)">
            <view class="uni-body">
              <view class="title">
                <view class="title-left">
                  <view class="title-title">
                    {{ item.workNo }}
                    <text class="title-times" v-show="item.carNo">
                      {{ item.carNo }}
                    </text>
                  </view>

                  <view
                    class="title-state"
                    :style="{
                      backgroundColor: item.status === 0 ? 'rgb(248,240,235)' : 'rgb(226,240,217)',
                      color: item.status === 0 ? 'rgb(197,90,17)' : 'rgb(0,176,80)',
                    }">
                    <template v-if="item.businessType === 0 || item.businessType === 2"> <!-- 装车 -->
                      {{ item.status === 0 ? '未发货' : item.status === 1 ? '已发货' : '' }}
                    </template>

                    <template v-if="item.businessType === 1 || item.businessType === 3"> <!-- 卸车 -->
                      {{ item.status === 0 ? '未入库' : item.status === 1 ? '已入库' : '' }}
                    </template>
                  </view>
                </view>
              </view>
              <view>
                <!-- 业务类型: 0-装车 1-卸车 2-装船 3-卸船 -->
                {{ item.businessType === 0 ? '装车' : item.businessType === 1 ? '卸车' : item.businessType === 2 ? '装船' : '卸船' }}-{{ item.merchandiseName }}-{{ item.tankNo }}号罐
              </view>
              <view
                style="
                  font-size: 12px;
                  display: flex;
                  justify-content: space-between;
                  width: 100%;
                "
              >
                <text style="color: orange">
                  {{ item.loadingEndDate }}
                </text>
                <text style="flex: end">
                  <!-- 发货企业名称 -->
                  {{ item.customerName }}
                </text>
              </view>
            </view>
          </uni-card>

          <uni-card v-else>
            <view class="button-box">
              <uni-icons type="closeempty" class="close" size="30" @click="closeButton"></uni-icons>
              <button class="mini-btn" type="primary" size="mini" @click.stop="onClickPrinter(item)" v-if="item.isPrinter == 1" style="width: 30%;background:#e6a23c;color:#fff;margin-right:20upx;">
                打印
              </button>
              <button class="mini-btn" type="primary" size="mini" @click="onClickDetail(item)" style="width: 30%">
                查看详情
              </button>
            </view>
          </uni-card>
        </view>
      </template>
    </Table>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import Table from "@/components/uniList.vue";
import { useAsyncData } from "@/hooks/useAsyncData.js";
import { apis as APIS } from "@/api/yiqiyipin.js";
import { router } from "@/router/index.js";
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";

const formRef = ref(null);

const formData = ref({
  carNo: null,
  workNo: null,
  startTime: null,
  endTime: null
})

const activeId = ref("");

// 切换卡片
const onCardClick = (item) => {
  activeId.value = item.storageId+item.businessType
};

// 查看详情
const onClickDetail = (item) => {
  router.toPage({
    path: "/pages/yiqiyipin/inoutDetail",
    params: {
      id: item.storageId,
      businessType: item.businessType,
      type: "detail",
    },
  });
};

const formatList = (rows) => {
  return rows.map((item) => {
    let row = {
      ...item
    };
    return {
      ...row
    };
  });
};

const searchValue = ref()
const popup = ref();
const onClickSearch = () => {
  popup.value.open();
}

const table = ref()

const filterForm = ref({
  carNo: formData.value.carNo,
  workNo: formData.value.workNo,
  startTime: formData.value.startTime,
  endTime: formData.value.endTime
});


const { fetchData, getList, queryParams } = useAsyncData({
  table,
  APIS: {
    ...APIS,
  },
  formatList,
  filterForm: filterForm.value
});

onMounted(() => {
  getList();
});

onShow(() => {
  getList();
});

// 搜索
const handleSubmit = () => {
  filterForm.value.carNo = formData.value.carNo
  filterForm.value.workNo = formData.value.workNo
  filterForm.value.startTime = formData.value.startTime
  filterForm.value.endTime = formData.value.endTime
  
  getList();
  popup.value.close();
}

// 重置
const handleReset = () => {
  formData.value = {
    carNo: null,
    workNo: null,
    startTime: null,
    endTime: null
  }
  filterForm.value.carNo = ''
  filterForm.value.workNo = ''
  filterForm.value.startTime = ''
  filterForm.value.endTime = ''
  
  // popup.value.close();
  getList();
}

// 打印
const onClickPrinter = (item) => {
  APIS.print(item.storageId).then((res) => {
    if(res.code === 200){
      
    }
  });
}

const closeButton = () => {
  activeId.value = "";
};
</script>

<style lang="scss" scoped>
.button-box {
  // display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: start;

  .mini-btn {
    margin: 0 5rpx;
  }
}

.close {
  position: absolute;
  top: -5rpx;
  right: -25rpx;
  color: skyblue !important;
}

.title {
  display: flex;
  justify-content: space-between;
  position: relative;

  &-left {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  &-title {
    height: 38upx;
    font-weight: 600;
    margin-bottom: 8upx;
  }
  &-times {
    background-color: rgb(22, 119, 255);
    padding: 2px;
    font-size: 12px;
    line-height: 15px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: 5px;
    color: #fff;
    font-weight: normal;
  }

  &-state, &-printer {
    position: absolute;
    right: 0;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 15px;
    border-radius: 10px;
    margin-left: 5px;
    
  }
  &-printer{
    right: 78upx;
    background-color: rgb(250,217,217);
    color: rgb(255,0,0);
  }
  &-state{
    right: 0;
  }
  &-businessType{
    right: 75upx;
  }
}

.refresh{
  display: none !important;
}

.popup-body{
  width: 100%;
  height: 820upx;
  padding: 20upx 30upx;
  background-color: #fff;
  
  .uni-forms-item{
    margin-bottom: 10upx;
  }

  .ft{
    display: flex;
    padding-top: 37upx;

    uni-button{
      flex: 1;
      font-size: 28upx;
    }

    .reset{
      margin-right: 50upx;
    }
  }
}

::v-deep .uni-calendar--fixed{
  bottom: -160upx !important;
}
::v-deep .uni-date__x-input{
  font-size: 14upx !important;
}
::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label{
  padding: 0 !important;
}
</style>
